<nz-card>
  <div class="common-search-wrap">
    <div class="common-search-forms">
      <div class="common-form-item">
        <label class="common-search-label">订单编号</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入订单编号"
            [(ngModel)]="searchParams.orderNum"
          />
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">货主</label>
        <div class="common-search-conrol">
          <nz-select
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="请选择货主"
            [(ngModel)]="supplierSelected"
            (ngModelChange)="multipleSelectChange($event, 'supplierId')">
            <nz-option
              *ngFor="let option of supplierOptions"
              [nzLabel]="option.name"
              [nzValue]="option.id">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">付款方式</label>
        <div class="common-search-conrol">
          <nz-select
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="searchParams.payType">
            <nz-option nzLabel="支付宝" [nzValue]="1"></nz-option>
            <nz-option nzLabel="微信" [nzValue]="2"></nz-option>
            <nz-option nzLabel="银联" [nzValue]="3"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">订单状态</label>
        <div class="common-search-conrol">
          <nz-select
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="stateSelected"
            (ngModelChange)="multipleSelectChange($event, 'status')">
            <ng-container *ngFor="let item of orderStateOptions">
              <nz-option
                [nzLabel]="item.label"
                [nzValue]="item.value">
              </nz-option>
            </ng-container>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">分账状态</label>
        <div class="common-search-conrol">
          <nz-select
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="searchParams.separateStatus">
            <ng-container *ngFor="let item of splitAccountOptions">
              <nz-option
                *ngIf="![0, 1].includes(item.value)"
                [nzLabel]="item.label"
                [nzValue]="item.value">
              </nz-option>
            </ng-container>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">分账时间</label>
        <div class="common-search-conrol">
          <nz-range-picker
            [(ngModel)]="separateDates"
            (ngModelChange)="timeChange($event, ['separateTime', 'separateEndTime'])">
          </nz-range-picker>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">分账流水</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入分账流水" [(ngModel)]="searchParams.separateNo" />
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">下单时间</label>
        <div class="common-search-conrol">
          <nz-range-picker
            [(ngModel)]="creatDates"
            (ngModelChange)="timeChange($event, ['createTime', 'endTime'])">
          </nz-range-picker>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">付款时间</label>
        <div class="common-search-conrol">
          <nz-range-picker
            [(ngModel)]="payDates"
            (ngModelChange)="timeChange($event, ['beginPayTime', 'endPayTime'])">
          </nz-range-picker>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">发货时间</label>
        <div class="common-search-conrol">
          <nz-range-picker
            [(ngModel)]="shipDates"
            (ngModelChange)="timeChange($event, ['beginShipTime', 'endShipTime'])">
          </nz-range-picker>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">收货时间</label>
        <div class="common-search-conrol">
          <nz-range-picker
            [(ngModel)]="receiptDates"
            (ngModelChange)="timeChange($event, ['receiptTime', 'receiptEndTime'])">
          </nz-range-picker>
        </div>
      </div>

      <div class="common-form-item">
        <div class="common-search-conrol">
          <button nz-button nzType="primary" class="m-r-8" (click)="queryData()">查询</button>
          <button nz-button nzType="default" (click)="resetData()">重置</button>
          <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
            {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</nz-card>

<nz-card class="m-t-2">
  <div class="table-wrap pagination-wrap-position">
    <nz-table
      #basicTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzBordered
      [nzScroll]="{ x: '1100px' }"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="tableParams.loading"
      [nzData]="tableParams.tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="tableParams.total"
      [nzPageIndex]="tableParams.page"
      [nzPageSize]="tableParams.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
    >
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="80px" nzLeft>序号</th>
          <th nzAlign="center" nzWidth="190px" nzLeft>订单编号</th>
          <th nzAlign="center" nzWidth="120px">状态</th>
          <th nzAlign="center" nzWidth="120px">付款平台</th>
          <th nzAlign="center" nzWidth="150px">货主</th>
          <th nzAlign="center" nzWidth="120px">服务费</th>
          <th nzAlign="center" nzWidth="120px">商品数量</th>
          <th nzAlign="center" nzWidth="120px">应收总额</th>
          <th nzAlign="center" nzWidth="120px">实收总额</th>
          <th nzAlign="center" nzWidth="170px">下单时间</th>
          <th nzAlign="center" nzWidth="170px">付款时间</th>
          <th nzAlign="center" nzWidth="170px">发货时间</th>
          <th nzAlign="center" nzWidth="200px">收货时间</th>
          <th nzAlign="center" nzWidth="120px">分账状态</th>
          <th nzAlign="center" nzWidth="120px">分账金额</th>
          <th nzAlign="center" nzWidth="170px">分账时间</th>
          <th nzAlign="center" nzWidth="180px">分账流水</th>
          <th nzAlign="center" nzWidth="180px" nzRight>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of basicTable.data; let index = index;">
          <td nzAlign="center" nzLeft>{{ index + 1 }}</td>
          <!-- 订单编号 -->
          <td nzAlign="center" nzLeft>
            <ng-container *ngIf="data?.orderNum;else templateNum">
              <a
                style="color: #1890ff;"
                target="_blank"
                routerLink="/used-store/usedOrderDetails"
                [queryParams]="{id: data.id}">
                {{ data?.orderNum }}
              </a>
            </ng-container>
            <ng-template #templateNum>-</ng-template>
          </td>
          <!-- 状态 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.status | orderStatus: 'color'}">
              {{ data.status | orderStatus: 'text' }}
            </span>
          </td>
          <!-- 付款平台 -->
          <td nzAlign="center">
            {{ data?.payType | payTypeStatus }}
          </td>
          <!-- 货主 -->
          <td nzAlign="center">
            <ng-container *ngIf="data?.supplierName;else templateHz">
              <a
                style="color: #1890ff;"
                target="_blank"
                [routerLink]="['/stock/sqeAdd', data.supplierId]">
                {{ data?.supplierName || '-' }}
              </a>
            </ng-container>
            <ng-template #templateHz>-</ng-template>
          </td>
          <!-- 服务费 -->
          <td nzAlign="center">{{ data?.serviceFee || '0' }}%</td>
          <!-- 商品数量 -->
          <td nzAlign="center">{{ data?.goodsNumber || '0' }}</td>
          <!-- 应收总额 -->
          <td nzAlign="right">{{ data?.totalPrice | number : '0.2-2' }}</td>
          <!-- 实收总额 -->
          <td nzAlign="right">{{ data?.realPrice | number : '0.2-2' }}</td>
          <!-- 下单时间 -->
          <td nzAlign="center">{{ data?.createTime || '-' }}</td>
          <!-- 付款时间 -->
          <td nzAlign="center">{{ data?.payTime || '-' }}</td>
          <!-- 发货时间 -->
          <td nzAlign="center">{{ data?.shipTime || '-' }}</td>
          <!-- 收货时间 -->
          <td nzAlign="center">
            <ng-container *ngIf="data?.receiptTime && data?.separateStatus === 2;else templateDay">
              <span [ngStyle]="{'color': returnDaysAgo(data?.receiptTime) <= 7 ? '#FF0000' : ''}">
                {{ data?.receiptTime }}
                <ng-container *ngIf="returnDaysAgo(data?.receiptTime) > 0">
                  （{{ returnDaysAgo(data?.receiptTime) }}天前）
                </ng-container>
              </span>
            </ng-container>
            <ng-template #templateDay>
              {{ data?.receiptTime || '-' }}
            </ng-template>
          </td>
          <!-- 分账状态 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data?.separateStatus | orderSplitAccountStatus: 'color'}">
              {{ data?.separateStatus | orderSplitAccountStatus: 'label' }}
            </span>
          </td>
          <!-- 分账金额 -->
          <td nzAlign="right">{{ data?.separateAmount | number : '0.2-2' }}</td>
          <!-- 分账时间 -->
          <td nzAlign="center">{{ data?.separateTime || '-' }}</td>
          <!-- 分账流水 -->
          <td nzAlign="center">{{ data?.separateNo || '-' }}</td>
          <!-- 操作 -->
          <td nzAlign="center" nzRight>
            <button
              *ngIf="permission.userPermission.has('used-store:usedOrderBranch:split') && data?.separateStatus === 2"
              nz-button
              nzType="link"
              (click)="showAccountModal(data)">
              分账
            </button>
            <button
              *ngIf="permission.userPermission.has('used-store:usedOrderBranch:split') && data?.separateStatus === 4"
              nz-button
              nzType="link"
              (click)="withdrawAccount(data)">
              撤回分账
            </button>
          </td>
        </tr>

        <!-- 合计tr -->
        <tr *ngIf="tableParams.tableData?.length">
          <td nzAlign="center" nzLeft>合计</td>
          <td nzAlign="center" nzLeft>{{ tableRowSum?.idCount || '0' }}单</td>
          <td nzAlign="center" colSpan="5">-</td>
          <td nzAlign="right">{{ tableRowSum?.sumTotalPrice | number : '0.2-2' }}</td>
          <td nzAlign="right">{{ tableRowSum?.sumrealPrice | number : '0.2-2' }}</td>
          <td nzAlign="center" colSpan="5">-</td>
          <td nzAlign="right">{{ tableRowSum?.sumSeparateAmount | number : '0.2-2' }}</td>
          <td nzAlign="center" colSpan="3">-</td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </div>
</nz-card>

<!-- S 分账 Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isVisible"
  [nzTitle]="'分账'"
  (nzOnCancel)="isVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <form nz-form [formGroup]="validateForm">
        <nz-form-item>
          <nz-form-label [nzSpan]="5">订单编号</nz-form-label>
          <nz-form-control [nzSpan]="19">
            {{ modalItem?.orderNum || '-' }}
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="5">实收总额</nz-form-label>
          <nz-form-control [nzSpan]="19">
            ￥ {{ modalItem?.realPrice | number : '0.2-2' }}
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="5">货主</nz-form-label>
          <nz-form-control [nzSpan]="19">
            {{ modalItem?.supplierName || '-' }}
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="5">服务费</nz-form-label>
          <nz-form-control [nzSpan]="19">
            {{ modalItem?.serviceFee || '0' }}%
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzRequired>分账金额</nz-form-label>
          <nz-form-control [nzSpan]="20" nzErrorTip="分账金额不能为空!">
            <nz-input-number
              style="width: 100%;"
              [nzMin]="0.01"
              [nzMax]="modalItem?.realPrice"
              [nzStep]="1"
              [nzPrecision]="2"
              nzPlaceHolder="请输入分账金额"
              formControlName="amount">
            </nz-input-number>

            <p class="split-modal-tip">
              {{ modalItem?.realPrice | number : '0.2-2' }} * （1 - {{ modalItem?.serviceFee || '0' }}%） * (1 - 6‰) = {{ returnAccountAmount(modalItem) }}
            </p>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item nz-row class="m-t-10">
          <nz-form-control [nzOffset]="5">
            <button nz-button nzType="primary" class="m-r-10" [nzLoading]="submitLoading" (click)="submitAccount()">确认分账</button>
            <button nz-button nzType="default" (click)="isVisible = false">取消</button>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>
  </div>
</nz-modal>
<!-- E 分账 Modal -->